<template>
  <div class="trade-buy-log-index">
    <van-list
      v-model="loading"
      :finished="finished"
      @load="onLoad"
      style="padding-bottom:50px"
    >
      <div class="van-cell van-hairline"><div class="van-cell__title" style="text-align: center;">{{ title }}</div></div>
      <van-collapse v-model="activeNames">
        <van-collapse-item v-for="item in list" :key="item.user_wallet_log_id" :name="item.user_wallet_log_id">
          <div slot="title">编号:{{ item.create_time }}</div>
          <div class="van-row">
            <div class="van-col van-col--12">数量:</div>
            <div class="van-col van-col--12" v-if="item.active.toString() === '1'">+{{ Math.round(item.amount, 2) }}</div>
            <div class="van-col van-col--12" v-if="item.active.toString() === '2'">-{{ Math.round(item.amount, 2) }}</div>
            <div class="van-col van-col--12">创建时间:</div>
            <div class="van-col van-col--12">{{ new Date(item.create_time * 1000).toLocaleString() }}</div>
          </div>
        </van-collapse-item>
      </van-collapse>
    </van-list>
  </div>
</template>

<script>
import { Tag, Row, Col, List, Button, Collapse, CollapseItem } from 'vant';
import ajaxVant from '../../../../utils/ajaxVant';
import auth from '../../../../utils/auth';

export default {
  components: {
    [Tag.name]: Tag,
    [Row.name]: Row,
    [Col.name]: Col,
    [List.name]: List,
    [Button.name]: Button,
    [Collapse.name]: Collapse,
    [CollapseItem.name]: CollapseItem
  },
  data() {
    return {
      activeNames: [],
      list: [],
      loading: false,
      finished: false,
      pager: {
        current: 1,
        limit: 6,
        totalPages: 1
      },
      title: '日志'
    };
  },
  methods: {
    onLoad() {
      var _this = this;
      _this.loading = true;
      if (_this.pager.current > _this.pager.totalPages) {
        _this.finished = true;
        _this.loading = false;
        return false;
      }
      auth.getToken().then(function(token) {
        ajaxVant.get('/user/wallet/log/' + _this.$route.params.field + '?page=' + _this.pager.current + '&token=' + token + '&limit=' + _this.pager.limit).then(function(data) {
          if (data !== false && typeof (data.pager) !== 'undefined') {
            if (typeof (data.pager.items) === 'undefined' || data.pager.items.length <= 0) {
              _this.finished = true;
            } else {
              for (var i in data.pager.items) {
                _this.list.push(data.pager.items[i]);
              }

              _this.pager.totalPages = data.pager.total_pages;
            }
          } else {
            _this.finished = true;
          }

          _this.pager.current += 1;
          _this.loading = false;
        });
      });
    }
  },
  beforeMount() {
    switch (this.$route.params.field) {
      case 1:
      case '1':
        this.title = '零售积分日志';
        break;
      case 2:
      case '2':
        this.title = '业务积分日志';
        break;
      case 3:
      case '3':
        this.title = '商城积分日志';
        break;
      case 4:
      case '4':
        this.title = '交易票日志';
        break;
      case 5:
      case '5':
        this.title = '开户票日志';
        break;
    }
  }
};

</script>
